<!-- 生产统计 -->
<template>
  <div class="app-container">
    <div class="cardBox">
      <leftTree ref="leftTree" :data="treeData" node-key="id" :default-props="defaultProps" search-key="factoryName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height:50px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-row class="table">
          <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" tab-position="top" class="statisTab">
            <el-tab-pane label name="1">
              <span slot="label">
                <i class="el-icon-s-release" />工序完工统计
              </span>
              <ProcessCompletionTable ref="processCompletionTable" :fields="fields.ProcessCompletionList" />
            </el-tab-pane>
            <el-tab-pane label name="2">
              <span slot="label">
                <i class="el-icon-s-marketing" />计划完工统计
              </span>
              <PlanCompletionTable ref="planCompletionTable" :fields="fields.PlanCompletionList" />
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-col>
    </div>
  </div>
</template>
<script>
import ImportFile from '@/components/ImportFile'
import Pagination from '@/components/Pagination'
import leftTree from '@/components/LeftTree'
import { mapGetters } from 'vuex'
import ProcessCompletionTable from './ProcessCompletionTable'
import PlanCompletionTable from './PlanCompletionTable'
export default {
  components: {
    leftTree,
    Pagination,
    ImportFile,
    ProcessCompletionTable,
    PlanCompletionTable
  },
  data() {
    return {
      activeName: '1',
      show: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'factoryName'
      },
      defaultExpandKeys: ['-1'],
      breadcrumb: ['车间目录'],
      loading: false,
      tableData: [],
      multipleSelection: [],
      total: 0,
      search: {
        current: 1,
        size: 20,
        keyword: '',
        treeStr: '-1'
      },
      fields: {
        ProcessCompletionList: [],
        PlanCompletionList: []
      }
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  mounted() {
    this.initFields()
    this.getTableInfo()
    this.getFactoryData()
  },
  methods: {
    initFields() {
      const obj = {
        ProcessCompletionList: [],
        PlanCompletionList: []
      }
      this.fieldList.forEach((item) => {
        item.code.includes('@1') && obj.ProcessCompletionList.push(item)
        item.code.includes('@2') && obj.PlanCompletionList.push(item)
      })
      this.fields = obj
      console.log(this.fields)
    },
    /**
     * @description: 获取所有车间
     * @return {*}
     */
    async getFactoryData() {
      const res = await this.$axios.get('/pro/factory/list')
      if (res.data.code === 200) {
        this.treeData = [
          { id: '-1', factoryName: '车间目录', children: res.data.data }
        ]
      }
    },
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      this.search.current = page
      this.loading = true
      const res = await this.$axios.post('/pro/put/list', this.search)
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        setTimeout(() => {
          this.loading = false
        }, 100)
      } else {
        this.loading = false
      }
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = []
      this.returnNodeLabel(node.parent)
      this.breadcrumb.push(data.factoryName)
      this.search.treeStr =
        data.factoryName === '车间目录' ? '-1' : data.factoryName
      if (this.activeName === '1') {
        this.$refs['processCompletionTable'].getTab(this.search.treeStr)
      } else {
        this.$refs['planCompletionTable'].getTab(this.search.treeStr)
      }
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.factoryName)
        this.returnNodeLabel(node.parent)
      }
    },
    /**
     * @description: 选中项
     * @param {*} val
     * @return {*}
     */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(tab, event) {
      if (this.activeName === '1') {
        this.$refs['processCompletionTable'].getTab(this.search.treeStr)
      } else {
        this.$refs['planCompletionTable'].getTab(this.search.treeStr)
      }
      console.log(tab, event)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
